import React, {useRef} from 'react';
import styles from './login.module.scss'
import {useNavigate,useSearchParams} from 'react-router-dom'
import { Button, Checkbox, Form, Input ,Row,Card} from 'antd';
import {login,ApiLoginData} from '../../api';
import {UserOutlined,EyeTwoTone, EyeInvisibleOutlined} from "@ant-design/icons";

const Login: React.FC = () => {
    var navigate = useNavigate();
    var [search] = useSearchParams();
    const username = useRef("");
    const password = useRef("");
    const onFinish = (values: ApiLoginData) => {
        console.log('Success:', values);
        login(values).then(res=>{
            if(res.data.code===1){
                localStorage.setItem("token",res.data.token)
                var redirect = search.get('redirect')||'admin'
                navigate(redirect)
            }
        })

    };

    const userLogin = () => {
       console.log(username.current)
    }

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <Row justify="center" align="middle" className={styles.login_site_ground}>
            <Card  title="用户登录" className={styles.login_card}>
                <Form
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        name="username"
                    >
                <Input placeholder="用户名/手机/邮箱"
                       suffix={<UserOutlined />} className={styles.login_user_input}/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                    >
                <Input.Password
                    className={styles.login_user_password}
                    placeholder="请输入密码"
                    iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
                    </Form.Item>
                    <Form.Item>
                <Button type="primary"  htmlType="submit" className={styles.login_btn}>登录</Button>
                    </Form.Item>
                </Form>
            </Card>
        </Row>
    );
};

export default Login;
